<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无线滚动</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 600px;
				height: 188px;
				border: 1px solid #000;
				margin: 100px auto;
				/*关闭隐藏可观察实际效果*/
				overflow: hidden;
			}
			ul{
				width: 2200px;
				height: 188px;
				animation:  move 10s linear 0s infinite normal;
			   background-color: black;
				
			}
			ul li{
				list-style:none ;
				width: 300px;
				height: 188px;
				background-color: red;
				border: 1px solid black;
				box-sizing: border-box;
				float: left;
			
			}
			@keyframes move{
				from{
					margin-left: 0;
				}
				/*移除4张图片*/
				to{
					margin-left:-1200px ;
				}
			}
			ul:hover {
				animation-play-state: paused;
				
			}
			/*半透明在子元素上可以看到父元素背景色*/
			ul:hover li{
				opacity: 0.5;
			}
			/*优先级高*/
			/*透明度1只能看到子元素，0只能看到父元素*/
			 ul li:hover{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
			<li><img src="../img/banner1.png"></li>
			<li><img src="../img/banner2.jpg"></li>
			<li><img src="../img/banner3.jpg"></li>
			<li><img src="../img/banner4.jpg"></li>
			<!--将开头的图片贴在末尾，图片运动完后调到开头时看不出是跳转-->
			<li><img src="../img/banner1.png"></li>
			<li><img src="../img/banner2.jpg"></li>
		    </ul>
		</div>
	
	</body>
</html>
